<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background: red;
             padding: 10px;
            border: 5px solid;
           margin: 20px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        // 元素的尺寸 
        // 1.元素的尺寸 2.元素的坐标 
        // 元素尺寸： 
        // 一、元素的宽和高一 ：offsetWidth 和 offsetHeight
        // offsetWidth 和 offsetHeight ：自身的宽和高 + 内边距 + 边框 
        // 获取元素 
        // var boxEle = document.querySelector(".box");
        // console.log(boxEle.offsetWidth);
        // console.log(boxEle.offsetHeight);

        // 二、元素的宽和高二： clientWidth 和 clinetHeight
        // clientWidth 和 clientHeight ：自身的宽和高 + 内边距
        var boxEle = document.querySelector(".box");
        console.log(boxEle.clientWidth);
        console.log(boxEle.clientHeight);

        // 总结 ： 1.offsetWidth 和 offsetHeight ： 自身宽高+内边距+边框的距离
        //         2.clientWidth 和 clientHeight ： 自身宽高 + 内边距 




        /* 
        offsetWidth offsetHeight
        clientWidth clientHeight
        offsetLeft  offsetTop
        clientLeft   clientTop
        offsetX      offsetY
        clientX      clientY
        pageX        pageY
        
        */
    </script>
</body>
</html>